import { createFormItem, getAcientById } from "./FormItem";

const formItem1 = createFormItem(
  'input',
  {
    label: '值为show-select则展示下拉框',
    value: 'show-select',
    prop: 'test-prop'
  },
  (current) => {
    if(current.payload.value === 'show-select') {
      return formItem2
    }
    return null;
  }
)

const formItem2 = createFormItem(
  'select',
  {
    value: 'show-checkbox',
    prop: 'test-prop2',
    label: '请选择是否展示下一个多选框',
    id: 'select-id',
    options: [
      {
        label: '只展示下一个多选框',
        value: 'show-checkbox',
      },
      {
        label: '不展示多选框',
        value: '',
      },
      {
        label: '展示下一个多选框 & 允许展示最后一个多选框',
        value: 'show-checkbox+',
      },
    ]
  },
  (current) => {
    if(current.payload.value === 'show-checkbox' || current.payload.value === 'show-checkbox+') {
      return formItem3;
    }
    return null;
  }
)

const formItem3 = createFormItem(
  'checkbox',
  {
    value: [],
    prop: 'test-prop3',
    label: '全选展示最后一个多选框',
    options: [
      {
        label: '多选1',
        value: 'checkbox-value1',
      },
      {
        label: '多选2',
        value: 'checkbox-value2',
      },
    ]
  },
  (current, acients) => {
    console.log(getAcientById('select-id')?.payload.value);
    if(getAcientById('select-id')?.payload.value === 'show-checkbox+' && (current.payload.value.indexOf('checkbox-value1') !== -1 && current.payload.value.indexOf('checkbox-value2') !== -1)) {
      return formItem4
    }
    return null;
  }
)

const formItem4 = createFormItem(
  'checkbox',
  {
    value: [],
    prop: 'test-prop4',
    label: '后面没有表单项了',
    options: [
      {
        label: '多选1',
        value: 'checkbox-value1',
      },
      {
        label: '多选2',
        value: 'checkbox-value2',
      },
    ]
  },
  () => {
    return null;
  }
)

export default formItem1;